<template>
  <view class="order-detail-container">
    <scroll-view class="order-detail-content" scroll-y>
      <uni-section padding>
        <uni-steps :options="list" active-color="#f0ad4e" :active="active" />
        <view class="address-info">
          <view class="name-phone"> <uni-icons type="icon-locate" size="30"></uni-icons>
            {{ orderDetail?.link_name_ }} {{ orderDetail?.link_phone_ }}</view>
          <view>{{ orderDetail?.link_region_ }} {{ orderDetail?.link_address_ }}</view>
        </view>

        <view class="">
          <view class="list-header">
            <text class="list-name">
              商品清单
            </text>
            <navigator :url="`/pages/order/order-goods-bill?list=${JSON.stringify(orderDetail?.item_list_)}`"
              open-type="navigate" hover-class="navigator-hover" class="list-item">
              <text>
                {{ goodsNumber }}种商品，
                共{{ productNumber }}件
              </text>
              <uni-icons type="right" size="14"></uni-icons>
            </navigator>
          </view>
          <view class="list-content">
            <image class="product_img_" :src="item.product_img_" mode="aspectFit" v-for="item in orderDetail?.item_list_"
              :key="item.product_id_" />
          </view>
        </view>
      </uni-section>
    </scroll-view>

    <view class="order-footer" :style="{ paddingBottom: $safeArea.safeAreaBottom + 'px' }">
      <button size="mini" class="btn btn-cancel" @tap="cancel" hover-class="button-hover">取消订单</button>
      <button size="mini" v-if="orderDetail?.form_status_ == 1" plain class="btn btn-go-pay" @tap="goPay"
        hover-class="button-hover">去付款</button>
      <button size="mini" v-else plain class="btn btn-del" @tap="del" hover-class="button-hover">删除</button>
    </view>

    <uni-popup ref="popup" type="center" background-color="#fff" border-radius="8px">
      <view class="content">
        <view class="header">
          <text>选择取消订单原因</text>
          <uni-icons type="closeempty" @tap="popup?.close()" size="24"></uni-icons>
        </view>
        <radio-group @change="radioChange">
          <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in cancelOrderRemark" :key="item.value">
            <radio :value="item.value" :checked="index === current" />
            <view style="margin-left: 8px;">{{ item.value }}</view>
          </label>
        </radio-group>
        <button plain size="mini" :disabled="!invalid_reason_" class="btn btn-submit" @tap="goSubmit"
          hover-class="button-hover">确认</button>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue"
import PNumber from "number-precision"
import Apis from "@/services/modules/order"
import { onLoad } from "@dcloudio/uni-app"
import type { orderlistData } from "@/types/order"

const props = defineProps<{
  id: number
}>()

const active = ref(1)
const list = [{
  title: '待确认'
}, {
  title: '待发货'
}, {
  title: '待收货'
}, {
  title: '完成'
}]


onLoad(() => {
  getOrderByIdData()
})

const orderDetail = ref<orderlistData>()
const productNumber = ref(0)
const goodsNumber = ref(0)
const getOrderByIdData = async () => {
  const { data } = await Apis.getOrderByIdApi(props.id)
  orderDetail.value = data

  data.item_list_.forEach(item => {
    goodsNumber.value++;
    productNumber.value = PNumber.plus(productNumber.value, (item.number_ || 0));
  })
}

// 去付款
const goPay = () => {
  uni.navigateTo({ url: '/pages/order/pay' })
}

// 删除
const del = () => {
  uni.showModal({
    title: '提示',
    content: `是否删除订单\r\n【${orderDetail.value!.code_}】?`,
    showCancel: true,
    success: async ({ confirm, cancel }) => {
      if (confirm) {
        await Apis.delOrderById(orderDetail.value!.id_)
      }
    }
  })
}

const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()

const cancelOrderRemark = [
  {
    key: 1,
    value: '商品无货'
  },
  {
    key: 2,
    value: '不想要了'
  },
  {
    key: 3,
    value: '商品信息填写错误'
  },
  {
    key: 4,
    value: '地址信息填写错误'
  },
  {
    key: 5,
    value: '商品降价'
  },
  {
    key: 6,
    value: '其他'
  },
]

const cancel = () => {
  popup.value?.open("center")
}

const current = ref()
const invalid_reason_ = ref()
const radioChange = (e: UniHelper.RadioGroupOnChangeEvent) => {
  invalid_reason_.value = e.detail.value
}

const goSubmit = async () => {
  await Apis.orderCancelApi({
    orderId: orderDetail.value!.id_,
    invalid_reason_: invalid_reason_.value
  })
  popup.value?.close()
  getOrderByIdData()
}

</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}

.order-detail-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .order-detail-content {
    flex: 1;
  }

  .uni-steps__row-circle {
    height: 12px;
    width: 12px;
  }

  .uniui-checkbox-filled {
    font-size: 20px !important;
  }

  .address-info {
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, .16);
    margin: 20px 6px;
    padding: 16px 12px;
    font-size: 14px;

    .name-phone {
      font-weight: 600;
      margin-bottom: 4px;
    }
  }

  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;

    .list-name {
      font-size: 15px;
      font-weight: 600;
    }
  }

  .list-content {
    display: flex;
    justify-content: flex-start;
    overflow: hidden;

    .product_img_ {
      width: 80px;
      height: 80px;
      margin-right: 12px;
      border-radius: 4px;
    }
  }

  .order-footer {
    display: flex;
    justify-content: space-between;
    padding: 12px;
  }
}

@mixin btnStyle($color ) {
  border-color: $color;
  background-color: $color;
  color: #fff;
  margin-left: 0;
  margin-right: 0;
}

.btn-buy-again {
  @include btnStyle($uni-color-success)
}

.btn-del {
  @include btnStyle($uni-color-error)
}

.btn-go-pay {
  @include btnStyle($uni-color-warning)
}

.btn-cancel {
  margin-left: 0;
  margin-right: 0;
}

.content {
  width: 80vw;
  // height: 50vh;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
  }

  .uni-list-cell-pd {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
  }

  .btn-submit {
    margin-top: 16px;
    @include btnStyle($uni-color-warning);
    line-height: 32px;
  }
}
</style>
